{layout name="layout" /}
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">ID</label>
          <div class="layui-input-block">
            <input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input" />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-block">
            <input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input" />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">邮箱</label>
          <div class="layui-input-block">
            <input type="text" name="email" placeholder="请输入" autocomplete="off" class="layui-input" />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <select name="sex">
              <option value="0">不限</option>
              <option value="1">男</option>
              <option value="2">女</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="zbc-user-search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
          </button>
        </div>
      </div>
    </div>

    <div class="layui-card-body">

      <div style="padding-bottom: 10px;">
        <button class="layui-btn layuiadmin-btn-useradmin" data-type="batchdel">
          删除
        </button>
        <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">
          添加
        </button>
      </div>

      <table id="zbc-user-manage" lay-filter="zbc-user-manage"></table>

      <script type="text/html" id="imgTpl">
        <img style="display: inline-block; " src= {{ d.avatar }}>
      </script>
      <script type="text/html" id="table-useradmin-webuser">
          {if (in_array('manager.user.edit',$Think.session.permissions))} <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>{/if}
          {if (in_array('manager.user.delete',$Think.session.permissions))} <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>{/if}
      </script>
    </div>
  </div>
</div>
<script>
  layui
    .config({
      base: "/static/layuiadmin/" //静态资源所在路径
    })
    .extend({
      index: "lib/index" //主入口模块
    })
    .use(["index", "table", 'curdtable'], function () {
      var $ = layui.$,
        form = layui.form,
        table = layui.table,
        curdtable = layui.curdtable;

      curdtable.init({
        TABLEID: 'zbc-user-manage',
        FORMSUBMIT: "zbc-user-submit",
        PAGEURL: '/admin/user/page',
        DELETEURL: '/admin/user/delete',
        EDITURL: '/admin/user/edit',
        ADDURL: '/admin/user/add',
        EDITTITLE: '编辑用户',
        ADDTITLE: '添加用户',
        LAYERAREA: ['900px', '620px'],
        cols: [
          [
            { type: "checkbox" },
            { field: "id", title: "ID", sort: true, width: 60 },
            { field: "username", title: "用户名" },
            { field: "nickname", title: "昵称" },
            { field: "avatar", title: "头像", width: 100, templet: "#imgTpl" },
            { field: "phone", title: "手机", sort: true },
            { field: "email", title: "邮箱" },
            {
              field: "birthday",
              title: "生日",
              templet:
                "<div>{{layui.util.toDateString(d.birthday, 'yyyy-MM-dd')}}</div>"
            },
            {
              field: "sex",
              width: 60,
              title: "性别",
              templet: function (d) {
                if (d.sex == 1) {
                  return '<i class="layui-icon layui-icon-male"></i>';
                } else if (d.sex == 2) {
                  return '<i class="layui-icon layui-icon-female"></i>';
                } else {
                  return "未填写";
                }
              }
            },
            {
              title: "操作",
              width: 150,
              align: "center",
              fixed: "right",
              toolbar: "#table-useradmin-webuser"
            }
          ]
        ]
      }).render();

      //监听搜索
      form.on("submit(zbc-user-search)", function (data) {
        var field = data.field;
        //执行重载
        table.reload("zbc-user-manage", {
          where: field
        });
      });

    });
</script>